<template>
  <div class="dialogBox">
    <el-dialog title="详情" @open='init' :visible.sync="dialogVisible" width="70%"
      :before-close="handleClose">
      <div class="dialogContent">
        <div class="imgBox">
          <img :src="data.img" class="girlImg" alt="">
        </div>
        <!-- 图片内容 -->
        <div class="imgTextBox">
          <h2>{{data.text}}</h2>
          <div class="descBox display">
            <div class="leftBox">
              <span class="text">拍摄设备：{{data.phone}}</span>
              <span class="text">发布时间：{{getDateYYMMDDTime(data.time)}}</span>
            </div>
            <div class="rightBox ">
              <!-- 下载 -->
              <div class="downloadBox">
                <el-button icon="el-icon-download" @click="$downloadImage('girlImg',data.text)"
                  circle>
                </el-button>
              </div>
              <div class="agreeBox" v-if="!data.support ">
                <!-- 点赞 -->
                <!-- <div @click="agreeFun(data.id,data.agree)">
                  <svg t="1651736823648" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2639" width="30" height="30">
                    <path
                      d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                      fill="#707070" p-id="2640"></path>
                  </svg>
                </div>
                <div class="agreeNumber">{{data.agree}}</div> -->
              </div>
              <!-- 取消点赞 -->
              <div class="noAgreeBox" v-else>
                <!-- <div @click="noAgreeFun(data.id,data.agree)">
                  <svg t="1651905212123" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3207" width="30" height="30">
                    <path
                      d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                      fill="#87b9fe" p-id="3208"></path>
                  </svg>
                </div>
                <div class="agreeNumber">{{data.agree}}</div> -->
              </div>

            </div>
          </div>
          <!-- 用户 -->
          <div class="userDescBox">
            <div class="headpic">
              <el-avatar size="large" :src="data.userimg"></el-avatar>
            </div>
            <div class="nameBox">{{data.username}}</div>
          </div>
          <div>
            <div v-if="userInfo">
              <div class="inputModel">
                <el-input v-model="input" placeholder="请输入内容">
                  <el-button slot="append" @click="comment">评论</el-button>
                </el-input>
              </div>
              <el-card class="box-card">
                <h2>{{commentListData.length}}条留言板</h2>
                <div v-for="item in commentListData" :key="item.id" class="commetBox">
                  <div class="imgBox">
                    <el-avatar size="medium" :src="item.headpic"></el-avatar>
                  </div>
                  <div class="commetRightBox">
                    <div class="topBox">
                      <span>{{ item.username }}</span>
                      <span> {{getDateYYMMDDTime(item.comment_time)}}</span>
                      <!-- 登录者只能删除自己的 -->
                      <span v-if="item.user_id == userInfo.id">
                        <el-button type="text" icon="el-icon-delete"
                          @click="delComment(item.comment_id)">
                        </el-button>
                      </span>
                    </div>
                    <div class="commetnTxt">
                      {{ item.comment_content }}
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="handleClose">取 消</el-button> -->
        <!-- <el-button type="primary" @click="confirmFun">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    dialogVisible: Boolean,
    data: Object
  },
  data() {
    return {
      isAgree: false,
      userInfo: null,
      input: null,
      commentListData: [],
    }
  },
  methods: {
    init() {
      this.getUserInfo();
      this.getCommentList();
    },
    delComment(id) {
      let params = {
        id
      };
      this.$axios.post('/api/delComment', params).then((res) => {
        let { status } = res;
        if (status) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getCommentList();
        }
      })
    },
    comment() {
      let params = {
        user_id: this.userInfo.id,
        commented_id: this.data.id,
        comment_content: this.input,
        comment_time: new Date().getTime(),
      };
      this.$axios.post('/api/commentData', params).then((res) => {
        let { status } = res;
        if (status == 200) {
          this.$message({
            message: '评论成功',
            type: 'success'
          });
          this.input = null;
          this.getCommentList();
        }
      })
    },
    getCommentList() {
      let params = {
        // user_id: this.userInfo.id,
        commented_id: this.data.id,
      };
      this.$axios.post('/api/commentList', params).then((res) => {
        let { data } = res;
        this.commentListData = data;
      })
    },
    // a标签的下载
    downloadImg() {
      var img = document.querySelector('.girlImg'); // 获取要下载的图片
      var url = img.src;                            // 获取图片地址
      var a = document.createElement('a');          // 创建一个a节点插入的document
      var event = new MouseEvent('click')           // 模拟鼠标click点击事件
      a.download = 'beautifulGirl'                  // 设置a节点的download属性值
      a.href = url;                                 // 将图片的src赋值给a节点的href
      a.dispatchEvent(event)                        // 触发鼠标点击事件
    },
    getUserInfo() {
      let userInfo = localStorage.getItem("islogin");
      let params = {
        email: userInfo,
      }
      this.$axios.post('/api/getUserInfo', params).then((res) => {
        let { data } = res
        this.userInfo = data[0];
      })
    },
    agreeFun(id, agree) {
      if (this.userInfo) {
        let params = {
          id,
          agree: Number(agree) + 1,
          user_id: this.userInfo.id,
          noAgree: false,
        };
        this.$axios.post("/api/myAgree", params).then((res) => {
          let { status } = res;
          if (status == 200) {
            // this.$emit('agreeChange', id);
          }
        });
      } else {
        this.$message({
          message: '请先登录！！！',
          type: 'warning'
        });
      }
    },
    noAgreeFun(id, agree) {
      let params = {
        id,
        agree: Number(agree) > 0 ? Number(agree) - 1 : Number(agree),
        user_id: this.userInfo.id,
        noAgree: true,
      };
      // console.log('取消点赞', params);
      this.$axios.post("/api/myAgree", params).then((res) => {
        let { status } = res;
        if (status == 200) {
          //   this.$emit('noAgreeChange', id)
        }
      });
    },
    confirmFun() { },
    handleClose() {
      this.$emit('closeetailDialog');
      this.$emit('upData')
    },
  }
}
</script>
<style lang="scss" scoped>
.imgBox {
  padding-top: 10px;
  box-sizing: border-box;
}
.imgTextBox {
  text-align: left;
}
.commetBox {
  display: flex;
}
.text {
  margin-right: 10px;
}
.userDescBox {
  display: flex;
  margin-top: 10px;
  .nameBox {
    margin-left: 10px;
    line-height: 40px;
  }
}
.rightBox {
  width: 130px;
  display: flex;
}
.display {
  display: flex;
  justify-content: space-between;
}
.agreeBox,
.noAgreeBox {
  display: flex;
  .agreeNumber {
    line-height: 32px;
    font-size: 25px;
  }
}
.agreeBox:hover,
.noAgreeBox:hover {
  cursor: pointer;
}
.downloadBox {
  margin-right: 20px;
}

.box-card {
  margin-top: 20px;
  min-height: 200px;
}
.text {
  font-size: 14px;
}
.carouselBox {
  img {
    width: 100%;
    height: 100%;
  }
}
.commetRightBox {
  margin-left: 10px;
}
.commetnTxt {
  //   margin-top: 5px;
  width: 520px;
}
</style>